<template>
  <el-row>
    <el-col :span="2">设置列数：</el-col>
    <el-col :span="12">
      <el-slider
        v-model="formMeta.formColCount"
        :min="1"
        :max="8"
      ></el-slider>
    </el-col>
  </el-row>
  
  <nf-form
    v-form-drag="formMeta"
    :model="model"
    v-bind="formMeta"
  >
  </nf-form>
</template>


<script>
  import { reactive, watch, onMounted, nextTick } from 'vue'
  import { ElCol, ElRow, ElSlider } from 'element-plus'
  import { createModel, lifecycle } from '/nf-ui-core'
  import { logTime } from '@naturefw/nf-tool'
  import _formMeta from '../../form/form.json'

</script>

<script setup>
  lifecycle('表单', true)
 
  const props = defineProps({
    moduleId: [Number, String],
    dataId: [Number, String],
    formMetaId: [Number, String],
    actionId: [Number, String],
    type: [Number, String],
    dialogInfo: [Object]
  })

  // 获取表单控件需要的meta
  const formMeta = reactive(_formMeta)
  // 改为插槽
  // formMeta.itemMeta[101].controlType = 1

  // 根据 meta 创建表单的 model
  const model = createModel(formMeta.itemMeta, formMeta.colOrder)

  const addNew = () => {
    const a = {}
    Object.assign(a, model)
    dataList.unshift(a)
  }

</script>